<template>
	<view v-if="content" class="content_box">
		<!--  -->
		<view class="bg_img_txt">
			<image class="img" :src="`${content.photo_path}`" mode="widthFix"></image>
			<view class="txt">
				<uni-icons type="camera" size="22" color="#F6F6F6"></uni-icons>
				<view class="num">
					{{content.dish_count}}
				</view>
			</view>
		</view>
		<!-- 详情 -->
		<view class="menu_detail">
			<view class="de_txt">
				<view class="txt_title">
					{{content.title}}
				</view>
				<view class="txt_min">
					精品 • 浏览{{content.views_count_text}} • 收藏{{content.favo_counts_text}} • 学做{{content.dish_count_text}}
				</view>
			</view>
			<view class="recipe_tags" v-if="content.recipe_tags.length>0"
				:style="`color:${content.recipe_tags[0].text_color};background:linear-gradient(to left, ${content.recipe_tags[0].background_end_color}, ${content.recipe_tags[0].background_start_color});`">
				<view class="tag_txt">
					{{content.recipe_tags[0].text}}
				</view>
				<image class="tag_img" :src="`${content.recipe_tags[0].right_image}`" mode=""></image>
			</view>
		</view>
		<!-- 用户信息 -->
		<view class="user_info">
			<!--  -->
			<view class="info_img">
				<image class="people_img" :src="`${content.user.user_photo}`" mode=""></image>
				<!-- 会员 -->
				<block v-if="content.user.verified_image">
					<image class="member_img" :src="`${content.user.verified_image}`" mode=""></image>
				</block>
			</view>
			<!-- name -->
			<view class="info_name">
				<view class="n_name">
					{{content.user.nickname}}
				</view>
				<view class="n_lv">
					LV{{content.user.lvl}}
				</view>
			</view>
			<!-- 关注 -->
			<view class="gz">
				关注
			</view>
		</view>
		<!-- 食材详情 -->
		<view class="food">
			<view class="food_nav">
				<text class="nav_detali">
					食材清单
				</text>
				<text class="nav_list">
					加入采购清单
				</text>
			</view>
			<!-- food_list_active -->
			<!--  -->
			<view :class="[fe.hasOwnProperty('tu') == true ?'food_list_active food_list':'food_list']"
				v-for="fe,fi in content.major" :key="fi" @tap="foodDetail(fe.tu)">
				{{fe.title}}
			</view>
		</view>
		<!-- 营养分析 -->
		<view class="nutrition" v-if="totalState">
			<qiun-data-charts type="pie" :canvas2d="true" :chartData="chartData"></qiun-data-charts>
		</view>
		<!-- 烹饪步骤 -->
		<view class="step">
			<view class="step_nav">
				<view class="nav_detali">
					烹饪步骤
				</view>
				<text class="nav_list">
					点击进入图片烹饪模式
				</text>
			</view>
			<!-- 列表 -->
			<view class="step_list">
				<view class="item" v-for="st ,si in content.cookstep" :key="si">
					<view class="item_title">步骤 {{si + 1}}/{{content.cookstep.length}}</view>
					<view class="item_img_box">
						<image class="item_img" :src="`${st.image}`" mode="widthFix"></image>
					</view>
					<view class="item_txt">{{st.content}}</view>
				</view>
				<!-- time -->
				<view class="step_time">
					{{content.release_time}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "menuContent",
		props: ["content"],
		data() {
			return {
				totalState: false, //图标渲染数据状态
				totalNum: 0, //总卡路里
				chartData: {
					series: [{
						data: [{
							name: "一班",
							value: 50
						}, {
							name: "二班",
							value: 30
						}, {
							name: "三班",
							value: 10
						}]
					}]
				}
			};
		},
		methods: {
			getTu() {
				let tempNum = this.content.nutrition_facts;
				let obj = [{
						"name": null,
						"value": 0
					},
					{
						"name": null,
						"value": 0
					},
					{
						"name": null,
						"value": 0
					}
				]
				let total = 0;
				for (let i = 0; i < tempNum.length; i++) {
					total = tempNum[i].calorie + total;
					// name
					obj[i].name = tempNum[i].nutrient;
					// 数量  Number(tempNum[i].amount.split(" ")[0])
					obj[i].value = Number(tempNum[i].amount.split(" ")[0])
				}
				// console.log('总数',total,obj)
				this.totalState = true
				this.$set(this.chartData.series[0], 'data', obj)
			},
			foodDetail(k) {
				console.log(k)
				if (k) {
					uni.navigateTo({
						url: `/pages/childPage/webView/webView?url=${k}`,
					});
				}

			}
		},
		created() {
			setTimeout(() => {
				this.getTu()
			}, 2000)

		},
	}
</script>

<style lang="scss">
	.content_box {
		width: 100%;

		// image
		.bg_img_txt {
			width: 100%;
			position: relative;

			.img {
				width: 100%;
			}

			.txt {
				position: absolute;
				bottom: 30rpx;
				right: 50rpx;
				background-color: rgba(0, 0, 0, .3);
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				width: 106rpx;
				height: 56rpx;
				border-radius: 14rpx;

				.num {
					color: #F6F6F6;
					font-weight: bold;
					font-size: 24rpx;
				}
			}
		}

		// title  详情
		.menu_detail {
			width: 92%;
			margin: 0 auto;

			.de_txt {
				width: 100%;

				.txt_title {
					font-size: 42rpx;
					font-weight: bold;
					padding: 10rpx 0;
				}

				.txt_min {
					font-size: 22rpx;
					font-weight: 600;
					color: #666;
					letter-spacing: 2rpx;
				}
			}

			.recipe_tags {
				width: 190rpx;
				height: 60rpx;
				margin: 26rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 40rpx;

				.tag_txt {
					font-size: 26rpx;
					margin-right: 6rpx;
				}

				.tag_img {
					margin-left: 6rpx;
					width: 12rpx;
					height: 20rpx;
				}
			}
		}

		// 用户信息
		.user_info {
			width: 92%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.info_img {
				position: relative;

				.people_img {
					width: 84rpx;
					height: 84rpx;
					border-radius: 50%;
				}

				.member_img {
					position: absolute;
					width: 26rpx;
					height: 26rpx;
					border-radius: 50%;
					bottom: 6rpx;
					right: 0;
				}
			}

			.info_name {
				width: 54%;
				display: flex;

				.n_name {
					font-size: 18rpx;
					// width: 100%;
					margin: 0 10rpx;
					font-weight: 600;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.n_lv {
					font-size: 26rpx;
					color: #E2CB90;
					font-weight: 600;
				}
			}

			.gz {
				width: 160rpx;
				height: 66rpx;
				line-height: 66rpx;
				font-size: 20rpx;
				text-align: center;
				background-color: #FFC533;
				border-radius: 50rpx;
				font-weight: 600;
				color: #564A2C;
				margin: 0 20rpx;
			}
		}

		// 食材详情
		.food {
			width: 92%;
			margin: 0 auto;

			.food_nav {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				font-weight: bold;
				margin: 10rpx 0;

				.nav_detali {}

				.nav_list {
					font-size: 20rpx;
					color: #50959F;

				}
			}

			.food_list {
				width: 100%;
				padding: 10rpx 0;
				font-weight: bold;
			}

			.food_list_active {
				color: #50959F;
			}
		}

		// 卡路里
		// .nutrition {
		// 	width: 100%;
		// 	height: 1000rpx;
		// }
		// 烹饪步骤
		.step {
			width: 92%;
			margin: 0 auto;

			.step_nav {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				font-weight: bold;
				margin: 10rpx 0;

				.nav_detali {}

				.nav_list {
					font-size: 20rpx;
					color: #50959F;

				}
			}

			// 列表
			.step_list {
				width: 100%;

				.item {
					width: 100%;

					.item_title {
						width: 100%;
						background-color: #FFFFFF;
						font-weight: bold;
						font-size: 26rpx;
						padding: 30rpx 0 40rpx;
						position: -webkit-sticky;
						position: sticky;
						top: 90rpx;
						z-index: 30;
					}
					.item_img_box{
						width: 99%;
						margin: 0 auto;
						.item_img {
							width: 100%;
							border-radius: 30rpx;
						}
					}

					.item_txt {
						margin: 10rpx 0;
						font-weight: bold;
						text-indent: 50rpx;
						letter-spacing: 3rpx;
					}
				}
				.step_time{
					padding: 10rpx 0;
					font-size: 20rpx;
					color: #666;
				}
				
			}
			// 
		}
		// 
	}
</style>
